<template>
  <div class="app-container">
    商城添加
    <el-form label-width="150px">
      <el-form-item label="药品编号">
        <el-input v-model="searchObj.medcode"/>
      </el-form-item>
      <el-form-item label="药品名称">
        <el-input v-model="searchObj.medname"/>
      </el-form-item>
      <el-form-item label="药品价格">
        <el-input v-model="searchObj.medprice"/>
      </el-form-item>
      <el-form-item label="药品库存">
        <el-input v-model="searchObj.availableNumber"/>
      </el-form-item>
      <el-form-item label="药品备注">
        <el-input v-model="searchObj.note"/>
      </el-form-item>
      <el-form-item label="jpg图片（可选）">
        <el-upload
          list-type="picture"
          action=''
          accept=".jpg"
          :limit="1"
          :auto-upload="false"
          :on-change="getFile"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleUploadRemove"
        >
          <el-button size="small" type="primary" v-if="inputVisible">选择图片上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传一张jpg文件</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="图片" >
        <img
          style="width: 100px; height: 100px"
          :src="'data:image/jpeg;base64,'+searchObj.image"
          :fit="fit">
        <el-button @click="handleUploadRemove">删除</el-button>
      </el-form-item>
    </el-form>
    <el-button @click="upload">提交</el-button>
  </div>
</template>
<script>
import shop from '@/api/shop'
export default {
  data(){
    return{
      searchObj:{
        medcode:"",
        medname:"",
        medprice:"",
        availableNumber:"",
        note:"",
        image:""
      }, //条件封装对象
      inputVisible:true,
      dialogVisible:false
    }
  },
  created() {
    if(this.$route.params&&this.$route.params.id){
      const id=this.$route.params.id
      this.showInfo(id)
    }else{
      this.searchObj={
        medcode:"",
        medname:"",
        medprice:"",
        availableNumber:"",
        note:"",
        image:""
      }
    }
  },
  methods:{
    showInfo(id){
      shop.getInfo(id)
        .then(response=>{
          this.searchObj=response.data
          console.log(this.searchObj)
        })
    },
    getFile(file) {
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        console.log(params, 'params')
        if (params.length > 0) {
          this.searchObj.image = params[1]
        }
      })
      this.inputVisible=false
      console.log(this.searchObj.image)
    },
// 获取图片转base64
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    handleUploadRemove(file, fileList) {
      this.searchObj.image = '';
      this.inputVisible=true;
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
      this.$forceUpdate()
    },
    upload(){
      console.log(this.searchObj)
      shop.saveMed(this.searchObj)
      this.$router.push({path:'/shop/list'})
    }
  }
}
</script>
